<template>
	<div class="content all-group-content" v-if="groups">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>{{ $t('name') }}</th>
					<th>{{ $t('owner') }}</th>
					<th>{{ $t('operation') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in groups" :key="item.id" @click="toGroupPage(item.id)"
					@contextmenu.prevent="toGroupPage(item.id, true)">
					<td class="link-color">
						<span v-if="!item.open" class="fa fa-lock c-danger"></span>
						{{ item.name }}
					</td>
					<td>
						{{ item.usernick }}({{ item.username }})
					</td>
					<td>
						<button class="btn btn-primary" @click="join(item.id, item.name)"
							@contextmenu.prevent="join(item.id, item.name, true)">
							{{ $t('join') }}
						</button>
					</td>
				</tr>
			</tbody>
		</table>

		<Pagination :page-info="pageInfo" :get-page-url="getPageUrl" />
	</div>
</template>


<script type="module">
import Pagination from '@/components/Pagination.vue';
import { GroupService, Router } from '@/common/common.object'
import { pageInfo } from '@/common/pagination';

export default {
	name: 'group-all',
	inject: ['toGroupPage', 'join', 'exit'],
	data() {
		return {
			groups: null,
			pageInfo: null,
		};
	},
	components: {
		Pagination,
	},
	created() {
		const pageNumber = this.$route.params.pageNumber;
		const pageSize = this.$route.params.pageSize;

		GroupService.getAll(pageNumber, pageSize).then(result => {
			this.pageInfo = pageInfo(result);
			this.groups = result.list;
		});
	},
	methods: {
		getPageUrl(pageNumber, pageSize) {
			return GroupService.getAllUrl(pageNumber, pageSize);
		},
	}
}
</script>